<template>
  <!-- 收货单小票 -->
  <div ref="print">
    <a-drawer
      placement="right"
      :closable="false"
      destroyOnClose
      :maskClosable="true"
      @close="onDrawerClose"
      :visible="visible"
      width="100%"
      :getContainer="false"
      :title="title"
    >
      <div id="print">
        <div class="blank">
          <div v-for="(use, index) in dataList" :key="index + use.Id">
            <div class="top">
              <div class="top-left">
                <div>
                  <i>收货单号:</i>
                  <span class="spansize"> {{ use.Code }}</span>
                </div>

                <div>
                  <i>收货日期:</i>
                  <span class="spansize"> {{ use.RecTime }}</span>
                </div>

                <!-- <div>
                  <i>收货仓库:</i>
                  <span> {{ use.StorIdName }}</span>
                </div> -->
              </div>
            </div>
            <div class="top-right"><div :ref="'listQrcode'" class="listQrcode" id="qrcode"></div></div>
            <div class="Listdetails" v-for="(item, index) in Buttonlist" :key="index + item.Id">
              <div class="MATOP">
                <i>物品名称:</i>
                <span class="spansize"> {{ item.MaterialIdName }}</span>
              </div>
              <div>
                <i>物品编码:</i>
                <span class="spansize"> {{ item.MaterialldCode }}</span>
              </div>
              <div>
                <i>收货数量:</i>
                <span class="spansize">{{ item.PlanNum }}</span>
                <span class="man"></span>
              </div>
              <div>
                <i>批次:</i>
                <span class="spansize"> {{ item.Batch }}</span>
              </div>
              <div>
                <i>生产日期:</i>
                <span class="spansize">{{ item.StartDate ? item.StartDate.substring(0, 10) : item.StartDate }}</span>
                <span class="man"></span>
                <i>失效日期:</i>
                <span class="spansize">{{ item.EndDate ? item.EndDate.substring(0, 10) : item.EndDate }}</span>
              </div>
              <div>
                <i>物品规格:</i>
                <span class="spansize">{{ item.MateSpce }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 50px"></div>
      <div
        :style="{
          position: 'fixed',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 9999,
          title: ''
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onDrawerClose">取消</a-button>
        <a-button type="primary" v-print="'#print'">打印</a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import moment from 'moment'
export default {
  data() {
    return {
      data: [],
      QrCode: '',
      loading: false,
      visible: false,
      queryParam: {},
      selectedRowKeys: [],
      dataList: [],
      Buttonlist: [],
      Buttonlist1: [],
      hunHeList: [],
      title: '',
      QrCode: ''
    }
  },
  created() {},
  computed: {
    allPlanNum() {
      if (this.Buttonlist1.length > 0) {
        var num = 0
        this.Buttonlist1.forEach(item => {
          num += item.PlanNum
        })
        return num
      } else {
        return 0
      }
    },
    allBaoNum() {
      if (this.hunHeList && this.hunHeList.length > 0) {
        return this.hunHeList.length
      } else {
        return 0
      }
    }
  },
  methods: {
    creatQrCode(qText, div) {
      var ar = new QRCode(div, {
        text: qText, // 需要转换为二维码的内容
        width: 80,
        height: 80,
        colorDark: '#000000',
        colorLight: '#ffffff'
        // correctLevel: QRCode.CorrectLevel.H
      })
      console.log(ar)
    },

    creatQrCodenew(qText, div) {
      var qrcode = new QRCode(div, {
        text: qText,
        width: 80,
        height: 80,
        colorDark: '#000000',
        colorLight: '#ffffff'
      })
    },

    getDataList() {
      this.$nextTick(() => {
        this.dataList.forEach((item, index) => {
          console.log(item.QRCode)
          this.creatQrCodenew(item.QrCode, this.$refs['listQrcode'][index])
        })
      })
    },
    async openDrawer(id, title) {
      this.Buttonlist = []
      this.Buttonlist1 = []
      this.hunHeList = []
      this.title = title
      this.visible = true
      await this.$http.post('/TD/TD_Receiving/GetPrints?ParentId=' + id, {}).then(res => {
        console.log(res)
        this.dataList = res.Data
        res.Data.forEach(mo => {
          mo.OrderTime = mo.OrderTime.substring(0, 10) //时间格式化
          mo.RecTime = mo.RecTime.substring(0, 10)
          // const subData = [...mo.Subdata]
          console.log(mo.Subdata)
          mo.Subdata.forEach(item => {
            if (!item.hunhe) {
              item.hunhe = item.PB_PackListRecDTO.some(im => im.BoxName.split('(混合)').length > 1)
            }
          })
          this.Buttonlist = mo.Subdata.filter(item => !item.hunhe) // 标准
          this.Buttonlist1 = mo.Subdata.filter(item => item.hunhe) // 有混合
          // 拆出混合包数据并去重
          let arr = []
          this.Buttonlist1.forEach(item => {
            arr = arr.concat(item.PB_PackListRecDTO)
          })
          for (let i = 0; i < arr.length; i++) {
            for (let j = i + 1; j < arr.length; j++) {
              if (arr[i].Id === arr[j].Id) {
                arr.splice(j, 1)
                j--
              }
            }
          }
          this.hunHeList = arr
          console.log(this.hunHeList)
          // this.Buttonlist = mo.Subdata.filter((item) => item.PB_PackListRecDTO.length > 0 || item.BaoNum == 0)
          // this.Buttonlist1 = mo.Subdata.filter((item) => item.PB_PackListRecDTO.length == 0 && item.BaoNum != 0)
          // this.hunHeList = mo.DDD || []
          console.log('标准', this.Buttonlist)
          console.log('混合', this.Buttonlist1)
          // console.log('混合列表', this.hunHeList)
        })
      })
      this.getDataList()
    },
    onDrawerClose() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
b {
  display: block;
  text-align: right;
  font-size: 16px;
}

p {
  line-height: 14px;
  font-size: 12px;
  text-align: center;
}

i {
  font-weight: 600;
  font-style: normal;
  margin-right: 2px;
}

div {
  overflow: hidden;
  font-size: 12px;
}
img {
  display: block;
  width: 80px;
  margin: 0 auto;
  padding: 10px;
}
.listQrcode {
  padding: 10px;
}
.left {
  float: left;
  width: 60%;
}
.right {
  float: right;
  width: 35%;
}
.k {
  display: block;
  font-size: 12px;
  /* padding: 10px; */
  color: #000;
}
.v {
  display: block;
  font-size: 42px;
  text-align: right;
  font-weight: 600;
  margin-left: 150px;
}
.bottom {
  margin-top: 10px;
  margin-bottom: 15px;
  border-bottom: 1px dotted #000;
}
.v {
  color: #000;
}
div[data-v-4ccfe3ba] {
  font-size: 9px !important;
}
.Listdetails {
  color: #000 !important;
  font-size: 9px !important;
}
.top-left {
  width: 205px;
  float: left;
}
.top-right {
  width: 205px;
  text-align: center;
  margin-left: 50px;
  color: black !important;
}
#print {
  color: black !important;
}
.blank {
  color: black !important;
}
.spansize {
  font-size: 16px;
  font-weight: 500;
}
.MATOP {
  margin-top: 15px;
}
.man {
  width: 35px !important;
  display: inline-block !important;
}
</style>
